<template>
	<main id="zzc-home" class="component-page component-page-normal">
		<div class="home-banner-list">
			<div
				class="swiper-container J-banner-list swiper-container-initialized swiper-container-horizontal swiper-container-ios">
				<ul class="swiper-wrapper activity-swiper-wrapper"
					style="transform: translate3d(-750px, 0px, 0px); transition-duration: 0ms;">
					<li class="swiper-slide activity-swiper-item swiper-slide-duplicate swiper-slide-duplicate-next"
						data-swiper-slide-index="2" style="width: 375px;"><a
							href="https://w.zuzuche.com/ssp/api/ori.php?url=aHR0cHM6Ly9zYnQuenV6dWNoZS5jb20vc2J0L3ppamlhX3hpbnJlbl90dA==&amp;uc=fb50238bb1e1189be42ce965980ffa7a&amp;token=eyJiaXRfaWQiOiI0MzgiLCJtYXR0ZXJfaWQiOiIyMDg1IiwidmVyaWZ5IjoiNTQyZjc4ZjY4ZDc5YmViY2M0MDBkMmExNTA2ZWFkNTgifQ==&amp;hash=651cf0d2"><img
								src="https://zzccdn.zuzuche.com/irc-common/upload_static/33/54/1c0008c4258865837b03f1fd0b641dfe.jpg!/fw/750/quality/90/format/webp"
								alt="创建于2020-11-30 09:59:14"></a></li>
					<li class="swiper-slide activity-swiper-item swiper-slide-prev" data-swiper-slide-index="0"
						style="width: 375px;"><a
							href="https://w.zuzuche.com/ssp/api/ori.php?url=aHR0cHM6Ly9zYnQuenV6dWNoZS5jb20vc2J0L3ppamlhX3dlZD91dG1fc291cmNlPWNyY19hcHAmdXRtX21lZGl1bT10b3BiYW5uZXImdXRtX2NhbXBhaWduPXdlZA==&amp;uc=d6619d45be328d03d1ba287035945431&amp;token=eyJiaXRfaWQiOiI0MzUiLCJtYXR0ZXJfaWQiOiIyMzM5IiwidmVyaWZ5IjoiZTk5MzI5ZTlmZGJmNDU2YjQ2NGU4ZjEyYmJjMDhmYWUifQ==&amp;hash=db30680a"><img
								src="https://zzccdn.zuzuche.com/irc-common/upload_static/42/88/87256fc3038745535e841bb21d9f60e8.jpg!/fw/750/quality/90/format/webp"
								alt="创建于2021-04-08 15:21:07"></a></li>
					<li class="swiper-slide activity-swiper-item swiper-slide-active" data-swiper-slide-index="1"
						style="width: 375px;"><a
							href="https://w.zuzuche.com/ssp/api/ori.php?url=aHR0cHM6Ly9tLnp1enVjaGUuY29tL3ppamlhL21pbmkvaDUvYmxhY2stY2FyZA==&amp;uc=7c4e9b0014f7fbb9bb60b781deb3d958&amp;token=eyJiaXRfaWQiOiI0MzYiLCJtYXR0ZXJfaWQiOiIyNTEzIiwidmVyaWZ5IjoiMGQ3NzQ2Yjg3ZmI0ZGM0MWUxZjMxYzk5Y2IwZGViYzUifQ==&amp;hash=421fcb12"><img
								src="https://zzccdn.zuzuche.com/irc-common/upload_static/12/17/03a7e6e43bd246e7be7bfd51d0656d84.jpg!/fw/750/quality/90/format/webp"
								alt="创建于2021-11-26 16:16:37"></a></li>
					<li class="swiper-slide activity-swiper-item swiper-slide-next" data-swiper-slide-index="2"
						style="width: 375px;"><a
							href="https://w.zuzuche.com/ssp/api/ori.php?url=aHR0cHM6Ly9zYnQuenV6dWNoZS5jb20vc2J0L3ppamlhX3hpbnJlbl90dA==&amp;uc=fb50238bb1e1189be42ce965980ffa7a&amp;token=eyJiaXRfaWQiOiI0MzgiLCJtYXR0ZXJfaWQiOiIyMDg1IiwidmVyaWZ5IjoiNTQyZjc4ZjY4ZDc5YmViY2M0MDBkMmExNTA2ZWFkNTgifQ==&amp;hash=651cf0d2"><img
								src="https://zzccdn.zuzuche.com/irc-common/upload_static/33/54/1c0008c4258865837b03f1fd0b641dfe.jpg!/fw/750/quality/90/format/webp"
								alt="创建于2020-11-30 09:59:14"></a></li>
					<li class="swiper-slide activity-swiper-item swiper-slide-duplicate swiper-slide-duplicate-prev"
						data-swiper-slide-index="0" style="width: 375px;"><a
							href="https://w.zuzuche.com/ssp/api/ori.php?url=aHR0cHM6Ly9zYnQuenV6dWNoZS5jb20vc2J0L3ppamlhX3dlZD91dG1fc291cmNlPWNyY19hcHAmdXRtX21lZGl1bT10b3BiYW5uZXImdXRtX2NhbXBhaWduPXdlZA==&amp;uc=d6619d45be328d03d1ba287035945431&amp;token=eyJiaXRfaWQiOiI0MzUiLCJtYXR0ZXJfaWQiOiIyMzM5IiwidmVyaWZ5IjoiZTk5MzI5ZTlmZGJmNDU2YjQ2NGU4ZjEyYmJjMDhmYWUifQ==&amp;hash=db30680a"><img
								src="https://zzccdn.zuzuche.com/irc-common/upload_static/42/88/87256fc3038745535e841bb21d9f60e8.jpg!/fw/750/quality/90/format/webp"
								alt="创建于2021-04-08 15:21:07"></a></li>
				</ul>
			</div>
			<div class="my-pagination swiper-pagination-bullets"><span class="swiper-pagination-bullet"></span><span
					class="swiper-pagination-bullet swiper-pagination-bullet-active"></span><span
					class="swiper-pagination-bullet"></span></div>
		</div>
		<div class="search-container">
			<div class="search-filter-container--1DnY0">
				<div class="search-filter-condition--2Ycy0">
					<div class="pick-up-container--3Ed8o pop-normal--32PpA zzc-h5--1_M7Y undefined">
						<div class="pick-up-wrapper--2yyQE">
							<div class="pick-up-content--OSUsY">
								<div class="pick-up-city--22s16">
									<div class="undefined pick-city--2soZq">
										<div class="pick-txt-tip--3e7Tm">取车城市</div>
										<div class="txt-strong--2yKog pick-flex--3RYEN city-box--2cxBM">
											<div class="city-name--T9Pa6">三亚</div>
											<div class="area-icon--9mxO1"><i class="component-icon undefined"><svg>
														<use xlink:href="#ic_driver_into2"></use>
													</svg></i></div>
										</div>
									</div>
									<div class="undefined pick-area--3RVqg">
										<div class="pick-txt-tip--3e7Tm">取车地点</div>
										<div class="pick-txt-main--LyC5K txt-strong--2yKog">凤凰</div>
									</div>
									<div class="undefined pick-other--DU--J">
										<div class="pick-txt-tip--3e7Tm">异店还车</div>
										<div class="pick-switch--3i3Xf">
											<div class="switch-btn-container">
												<div class="switch-btn"></div>
											</div>
										</div>
									</div>
								</div>
								<div class="pick-up-date--2rWCq">
									<div class="pick-up-date-item--2iQMM" data-tj="首页_打开_取还车时间选择器_1">
										<div class="date-box--2eG7M">
											<div class="date-time--3ZEPE">03月23日</div>
											<div class="time-box--3xb4U">
												<div>周三</div>
												<div class="hour--LUZta">10:00</div>
											</div>
										</div>
									</div>
									<div class="pick-up-date-day--2DXXa">
										<div class="duration--2G2lx">2天</div>
										<div class="botton-arrow-container"><span class="botton-arrow-triangle"></span>
										</div>
									</div>
									<div class="pick-up-date-item--2iQMM txt-right--IE2je" data-tj="首页_打开_取还车时间选择器_2">
										<div class="date-box--2eG7M">
											<div class="date-time--3ZEPE">03月25日</div>
											<div class="time-box--3xb4U">
												<div>周五</div>
												<div class="hour--LUZta">10:00</div>
											</div>
										</div>
									</div>
								</div>
								<div class="pick-up-search-btn--NWJ1H pick-up-search-btn-normal--3isTw"
									data-tj="首页_点击_搜索按钮">搜索</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<section>
			<div class="m-preferential-package--3TXta">
				<ul class="m-icon-tab--3e_G4">
					<li class="tab-item--QB9Z7"><img class="u-img--1Cn0v"
							src="https://zzccdn.zuzuche.com/irc-common/upload_static/40/94/9e37e1f40d9ef947a6b24591e7d6770b.png"
							alt="图标">
						<p class="u-desc--3IQEt">长租特惠</p>
					</li>
					<li class="tab-item--QB9Z7"><img class="u-img--1Cn0v"
							src="https://zzccdn.zuzuche.com/irc-common/upload_static/69/69/7da7f191da8ea4f2c3fff42b1918b2d3.png"
							alt="图标">
						<p class="u-desc--3IQEt">豪车跑车·个性车</p>
					</li>
					<li class="tab-item--QB9Z7"><img class="u-img--1Cn0v"
							src="https://zzccdn.zuzuche.com/irc-common/upload_static/42/01/a22fa435485ad44d4da214b2191c15d6.png"
							alt="图标">
						<p class="u-desc--3IQEt">全国房车</p>
					</li>
					<li class="tab-item--QB9Z7"><img class="u-img--1Cn0v"
							src="https://zzccdn.zuzuche.com/irc-common/upload_static/25/06/18a47d70bea2e11023da49660ae68a5c.png"
							alt="图标">
						<p class="u-desc--3IQEt">省钱月卡</p>
					</li>
				</ul>
				<ul class="m-tow-banner--nay1d">
					<li class="tab-item--QB9Z7"><img class="u-img--1Cn0v"
							src="https://zzccdn.zuzuche.com/irc-common/upload_static/49/38/9e16a0e963196a8d6baac13e479bbaa5.png"
							alt="图标"></li>
					<li class="tab-item--QB9Z7"><img class="u-img--1Cn0v"
							src="https://zzccdn.zuzuche.com/irc-common/upload_static/48/79/4bc4481611b7a8c7fe9f315898c24145.png"
							alt="图标"></li>
				</ul>
				<div class="m-large-banner--34BjE"><img class="u-img--1Cn0v"
						src="https://zzccdn.zuzuche.com/irc-common/upload_static/80/19/235ac66b0eb46e35865e77c37f1866b5.jpg"
						alt="图标"></div>
			</div>
		</section>
		<div class="section-wrapper">
			<div class="section-header section-header-1">轻松租车 全面保障</div>
			<div class="section-body">
				<div class="relieved-and-fast-travel">
					<div class="tab-item"><img class="u-img"
							src="https://zzccdn.zuzuche.com/irc-common/upload_static/21/72/5914b5266b41768deb58be900e4df8d3.png"
							alt="图标"></div>
					<div class="tab-item"><img class="u-img"
							src="https://zzccdn.zuzuche.com/irc-common/upload_static/71/52/5ecf33b06ffc24431079e57a0aecde15.png"
							alt="图标"></div>
				</div>
			</div>
		</div>
		<div class="section-wrapper">
			<div class="section-header section-header-1"><span class="s-emphasized">3</span>重叠加优惠 比门店便宜</div>
			<div class="section-body">
				<ul class="discount-list">
					<li class="discount-item">
						<p class="discount-item-title">领券立减500</p>
						<p class="discount-item-subtitle">千元礼包<br>限时抢</p>
					</li>
					<li class="discount-item">
						<p class="discount-item-title">平台独家优惠</p>
						<p class="discount-item-subtitle">比门店租车<br>便宜</p>
					</li>
					<li class="discount-item">
						<p class="discount-item-title">下单再减5%</p>
						<p class="discount-item-subtitle">邀请好友<br>砍价返现</p>
					</li>
				</ul>
			</div>
		</div>
		<div class="m-comment-container">
			<div class="m-title">真实用户自驾评论</div>
			<ul class="m-main">
				<li class="m-list">
					<div class="list-banner"
						style="background-image: url('https://zzccdn.zuzuche.com/irc-common/upload_static/19/75/716f345581a34ec721be334dc6d57f0e.jpg!/fw/464/quality/70/format/webp');">
						<div class="img-num">9图</div>
					</div>
					<div class="list-header">
						<div class="left">
							<div class="avator"><img
									src="https://imgcdn1.zuzuche.com/user_icon/4239/42392054ddefea333df432bce89083148fb9023f_200.jpg!/both/100x100/format/webp/quality/75/strip/true/compress/true"
									class="img"></div>
							<div class="name">金*</div>
						</div>
						<div class="right-address">伊犁</div>
					</div>
					<div class="list-content">
						这个价格还是比较实惠，就是普拉多的油耗还是比较高的，老板人很不错，租车前一晚就把车放在车站了，车很干净，车况也很好，取还车都非常省心，如果下次去，还会选这家！</div>
					<div class="list-car">丰田 普拉多</div>
				</li>
				<li class="m-list">
					<div class="list-banner"
						style="background-image: url('https://zzccdn.zuzuche.com/irc-common/upload_static/19/02/a43c6fd87498ef32ced63f366c8c1186.jpg!/fw/464/quality/70/format/webp');">
					</div>
					<div class="list-header">
						<div class="left">
							<div class="avator"><img
									src="https://imgcdn1.zuzuche.com/user_icon/4022/4022414520ecedfe64d9204abe57e4b83748ba2e_200.jpg!/both/100x100/format/webp/quality/75/strip/true/compress/true"
									class="img"></div>
							<div class="name">张*</div><img class="easy-icon"
								src="https://imgcdn5.zuzuche.com/static/15/04/e3bfc73287a15f50c22925015220de2b.png"
								alt="easyRent">
						</div>
						<div class="right-address">万宁</div>
					</div>
					<div class="list-content">专业</div>
					<div class="list-car">雪佛兰 科沃兹</div>
				</li>
				<li class="m-list">
					<div class="list-banner"
						style="background-image: url('https://zzccdn.zuzuche.com/irc-common/upload_static/10/66/6b020fb042b13d5977ad00b13fa09da3.jpg!/fw/464/quality/70/format/webp');">
						<div class="img-num">8图</div>
					</div>
					<div class="list-header">
						<div class="left">
							<div class="avator"><img
									src="https://imgcdn5.zuzuche.com/static/34/20/c836a1f53e360e31605ea5f42d6ac18a.jpg!/format/webp"
									class="img"></div>
							<div class="name">王*</div>
						</div>
						<div class="right-address">延边</div>
					</div>
					<div class="list-content">
						太赞了！租过神州，租过一嗨，这个平台是最方便最省心的！取还地沟通方便，车子新，干净，我们机场到的早了，很贴心的给换了辆节省时间。还车时也特别省心，雪地胎，开进老里克湖里飘雪积雪都没事，帅得不行～服务的虎哥爽气热情～必须满分～
					</div>
					<div class="list-car">大众 朗逸</div>
				</li>
				<li class="m-list">
					<div class="list-banner"
						style="background-image: url('https://zzccdn.zuzuche.com/irc-common/upload_static/19/59/d5aa7d64fb29e73bb6eef654a7579348.jpg!/fw/464/quality/70/format/webp');">
						<div class="img-num">5图</div>
					</div>
					<div class="list-header">
						<div class="left">
							<div class="avator"><img
									src="https://imgcdn5.zuzuche.com/static/35/04/c168f1b81caf09ed56d8956b266c0f6f.jpg!/format/webp"
									class="img"></div>
							<div class="name">张*</div>
						</div>
						<div class="right-address">拉萨</div>
					</div>
					<div class="list-content">
						租车大哥很靠谱，夫妻两口子非常热情。去现场看了车，订好第二天用车，谈好以后大哥当天就让把车开走了。四千公里新车，车况很棒。还车也很方便，上门接车。非常好的体验</div>
					<div class="list-car">长城 坦克300</div>
				</li>
				<li class="m-list">
					<div class="list-banner"
						style="background-image: url('https://zzccdn.zuzuche.com/irc-common/upload_static/34/37/41c796f981894bf5f6914d32cee2163b.jpg!/fw/464/quality/70/format/webp');">
						<div class="img-num">7图</div>
					</div>
					<div class="list-header">
						<div class="left">
							<div class="avator"><img
									src="https://imgcdn5.zuzuche.com/static/31/30/818449e323497bbabffc920302e64007.jpg!/format/webp"
									class="img"></div>
							<div class="name">王*</div><img class="easy-icon"
								src="https://imgcdn5.zuzuche.com/static/15/04/e3bfc73287a15f50c22925015220de2b.png"
								alt="easyRent">
						</div>
						<div class="right-address">长春</div>
					</div>
					<div class="list-content">
						取车子非常方便，车子送来已经洗干净，有carplay，手机支架和一副手套，车辆状况也不错，配备四条米其林雪地胎，在冰雪路面简直完美，还车也很便捷，下次来长春一定还来你家租车。体验非常好
					</div>
					<div class="list-car">捷达 VA3</div>
				</li>
				<li class="m-list-more">
					<div class="more-text">查看更多</div><img
						src="http://imgcdn5.zuzuche.com/static/16/72/68764e935580e1a24b5288bd8c7485e5.png" alt="more">
				</li>
				<li class="border"></li>
			</ul>
		</div>
		<section class="join"><img
				src="https://imgcdn5.zuzuche.com/static/14/23/b5f015868a0a8be0f8c2955562464374.png!/fw/750/quality/70/format/webp"
				class="img" alt="租车加盟"></section>
		<div class="serve-container">
			<div class="serve-container-title">境内租车就选租租车</div>
			<div class="serve-container-body">
				<ul class="serve-list">
					<li class="serve-item">
						<div class="cover"></div>
						<p class="title">支持全国</p>
						<p class="subtitle">600多个城市</p>
					</li>
					<li class="serve-item">
						<div class="cover"></div>
						<p class="title">7x24小时</p>
						<p class="subtitle">客户服务</p>
					</li>
					<li class="serve-item">
						<div class="cover"></div>
						<p class="title">11年租车平台</p>
						<p class="subtitle">服务超3千万用户</p>
					</li>
					<li class="serve-item">
						<div class="cover"></div>
						<p class="title">信用免押金</p>
						<p class="subtitle">免租车&amp;违章押金</p>
					</li>
					<li class="serve-item">
						<div class="cover"></div>
						<p class="title">送车上门</p>
						<p class="subtitle">上门取车</p>
					</li>
					<li class="serve-item">
						<div class="cover"></div>
						<p class="title">享3重优惠</p>
						<p class="subtitle">比门店便宜 </p>
					</li>
				</ul>
			</div>
		</div>
		<div></div>
	</main>
</template>

<script>
	import {getBannerList} from '../../../api/pjapi.js'
	export default {
		data() {
			return {
				list: ['未付款', '待评价', '已付款'],
				curNow: 0
			}
		},
		methods: {
			sectionChange(index) {
				this.curNow = index;
			}
		},
		onLoad() {
			getBannerList().then(res=>{
				console.log(res)
			})
		}
	}
</script>
